<script lang="ts" setup>

import { useCookies } from '@vueuse/integrations/useCookies'
import { onMounted, ref } from 'vue'
import { useUserStore } from '../stores/user'
import http from '../http';
import { RouterLink } from 'vue-router';

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
//存储用户菜单的数据
const menuData=ref([])

//挂载完成获取当前用户拥有的权限菜单
onMounted(()=>{
    //从pinia获取用户对象
    const userStore=useUserStore()
    const user=userStore.getUser
    //1.获取登录的用户编号
    const userid=user.value.id
    // const cookies=useCookies()
    //2.向后端发送请求 根据用户编号获取用户拥有的菜单
    http.get('/menu/getUserMenus')
    .then((res)=>{
        console.log(res)
        menuData.value=res
    })
})
</script>

<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
                <el-sub-menu index="1" v-for="menu in menuData" :key="menu.id" :index="menu.id">
                    <template #title>
                        <span>{{menu.menuname}}</span>
                    </template>
                    <!-- 子菜单 -->
                    <el-menu-item-group  v-for="childMent in menu.childMenuList" :key="childMent.id" :index="menu.id+'-'+childMent.id">
                        <el-menu-item index="1-1">
                            <!-- 路由链接 -->
                             <RouterLink :to="'/index'+childMent.path">
                            <el-icon>
                                <component :is="childMent.imageUrl"></component>
                            </el-icon>
                            {{ childMent.menuname }}
                            </RouterLink>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>

</template>

<style scoped>
    a{
        text-decoration: none;
        color: black;
    }
</style>